<template>
    <div>
        <!--增加或更新的表单弹窗-->
        <div style="text-align: left; margin: 10px">

        </div>

        <!--列表-->
        <div style="margin: 0px 10px;text-align: left;">
            <el-table
                    :data="ticketOrders.slice((searchParams.pageNo-1)*searchParams.pageSize, searchParams.pageNo * searchParams.pageSize)"
                    stripe
                    :default-sort="{prop: 'createTime', order: 'ascending'}">

                <el-table-column prop="goodsTitle" label="商品标题"></el-table-column>
                <el-table-column prop="orderCreator" label="订单创建者"></el-table-column>
                <el-table-column prop="address" label="寝室" sortable></el-table-column>
                <el-table-column prop="orderPrice" label="订单价格" sortable>
                    <template slot-scope="scope">
                        ￥{{scope.row.orderPrice / 10}}
                    </template>
                </el-table-column>
                <el-table-column prop="ticketPrice" label="水票价格" sortable>
                    <template slot-scope="scope">
                        ￥{{scope.row.ticketPrice / 10}}
                    </template>
                </el-table-column>
                <el-table-column prop="orderStatus" label="订单状态" sortable>
                    <template slot-scope="scope">
                        {{scope.row.orderStatus === 1 ? "已完成"
                        : scope.row.orderStatus === 2 ? "未付款" : "已取消"}}
                    </template>
                </el-table-column>
                <el-table-column prop="payType" label="支付类型"></el-table-column>
                <el-table-column prop="createTime" label="创建时间"></el-table-column>

                <!-- 可选的状态改变器-->
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="cancelOrder(scope.row.id)" type="text" size="mini">取消</el-button>
                        <el-button @click="finishOrder(scope.row.id)" type="text" size="mini">完成</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页组件-->
            <el-row style="float: right">
                <el-pagination
                        @current-change="changePageNo"
                        @size-change="changePageSize"
                        :current-page.sync="searchParams.pageNo"
                        :page-sizes="[5, 10, 20, 30, 50, 100]"
                        :page-size.sync="searchParams.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="ticketOrders.length">
                </el-pagination>
            </el-row>

        </div>
    </div>
</template>

<script>
    import {
        listTicketOrdersHandling,
        finishOrder,
        cancelOrder
    } from "@/api/modules/app/ticketOrderApi.js";

    export default {
        name: "ticketOrderComponent",
        data() {
            return {
                // 查询参数
                searchParams: {
                    searchParam1: null,
                    pageNo: 1,
                    pageSize: 10,
                },
                ticketOrders: []
            }
        },
        mounted() {
            this.getTicketOrders()
        },
        methods: {
            // 获取数据
            getTicketOrders() {
                let that = this;
                listTicketOrdersHandling().then(result => {
                    that.ticketOrders = result.data;
                })
            },
            // 切换页数
            changePageNo(pageNo) {
                this.searchParams.pageNo = pageNo;
            },
            // 改变页面大小
            changePageSize(pageSize) {
                this.searchParams.pageSize = pageSize;
            },
            // 清除查询参数
            clearSearchParams() {
                this.searchParams.searchParam1 = null;
            },
            finishOrder(orderId) {
                let that = this;
                this.$confirm("确认订单已完成", "提示", {}).then(() => {
                    finishOrder(orderId).then(() => {
                        this.$notify.success({
                            title: '已完成',
                            duration: 500
                        })
                        that.getTicketOrders();
                    })
                }).catch(() => {
                })
            },
            // 取消订单
            cancelOrder(orderId) {
                let that = this;
                this.$confirm("是否取消该订单", "提示", {}).then(() => {
                    cancelOrder(orderId).then(() => {
                        this.$notify.success({
                            title: '已取消',
                            duration: 500
                        })
                        that.getTicketOrders();
                    })
                }).catch(() => {
                })
            },
        }
    }
</script>
